<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>000</title>
        <style>
            html,body,ul {
                margin:0;
                padding:0;
            }
            body {
                padding:10px;
            }
            #wrap {
                width:960px;
                margin:30px auto;
                z-index:-1;
            }
            h1 {
                font-size:14px;
            }
            ul {
                width:960px;
                height:346px;
                border:1px solid #ccc;
                list-style-type:none;
                padding:10px 0;
            }
            .clear {
                content:"";
                display:block;
                clear:both;
            }
            li {
                width:238px;
                height:346px;
                float:left;
                text-align:center;
                background:url(img/down.png) 0px 0px no-repeat;
                background-size:100%;
                position:relative;
                border-right:1px solid #ccc;
            }
            li:last-child {
                border:none;
            }
            li .box {
                width:238px;
                height:346px;
                background:#fff;
                position:absolute;
                top:0;
                left:0;
            }
            .box img {
                width:200px;
                height:150px;
            }
            .box input[type="text"] {
                width:172px;
                height:20px;
                background:#DED6E7;
                outline:none;
                text-align:center;
                border:0;
            }
            .box .remaining_time {
                color:red;
            }
            .box .tit {
                width:200px;
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap;
                font-size:14px;
                padding:0 10px;
            }
            .box .show_price {
                width:200px;
                height:40px;
                line-height:40px;
            }
            .box .show_price span:first-child {
                font-size:20px;
            }
            .box .show_price .price {
                color:red;
                margin-left:5px;
                font-size:18px;
            }
            table {
                width:960px;
                background:#ccc;
                margin-top:20px;
                border-collapse: collapse;
            }
            table thead td{
                width:320px;
                text-align:center;
                padding:20px 0;
            }
            table tbody td {
                border-top:5px solid #fff;
                padding:10px 0;
                width:320px;
                text-align:center;
            }
            table tbody td:first-child p{
                width:200px;
                margin-left:20px;
                white-space:nowrap;
                text-overflow:ellipsis;
                overflow:hidden;
            }
            table tbody img {
                width:80px;
                height:50px;
            }
            #total {
                font-size:24px;
            }
            #total .all {
                color:red;
            }
        </style>

        <script>
            
                //getStyle
                function getStyle(obj,attr) {
                    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
                }
                
                //shake
                function shake(obj,attr,endFn) {
                    var pos = parseInt( getStyle(obj,attr) );
                    var arr = [];
                    var num = 0;
                    var timer = null;   //*
                    for(var i=10; i>0; i -=2) {
                        arr.push( i,-i );
                    }
                    arr.push(0);
                    
                    clearInterval(obj.shakeTimer);
                    obj.shakeTimer = setInterval( function () {
                        obj.style[attr] = pos + arr[num] + "px";
                        num++;
                        if(num === arr.length) {
                            clearInterval(obj.shakeTimer);
                            if(endFn) {
                                endFn();
                            }
                        }
                    },50 )
                    
                }
                
                //doMove
                function doMove(obj,attr,dir,target,endFn) {
                    dir = parseInt( getStyle(obj,attr) ) < target ? dir : -dir;
                    clearInterval(obj.timer);
                    obj.timer = setInterval( function () {
                        var speed = parseInt( getStyle(obj,attr) ) + dir;
                        if(speed > target && dir > 0 || speed < target && dir < 0) {
                            speed = target;
                        }
                        obj.style[attr] = speed + "px";
                        if(speed == target) {    //*
                            clearInterval(obj.timer);
                            if(endFn) {
                                endFn();
                            }
                        }
                    },30 )
                }
                
                //opacity 
                function opacity(obj,step,target,frequency,endFn) {
                    var currentOpacity =  getStyle(obj,"opacity")*100;  //*
                    step = currentOpacity < target ? step : -step;   //*
                    clearInterval(obj.alpha);
                    obj.alpha = setInterval( function () {
                        currentOpacity = getStyle(obj,"opacity")*100;     //为了下面兼容低版本的filter所以乘以100
                        var nextOpacity = currentOpacity + step;
                        if(nextOpacity > target && step >0 || nextOpacity < target && step <0) {
                            nextOpacity = target;
                        }
                        obj.style.opacity = nextOpacity/100;
                        obj.style.filter = "alpha(opacity:"+ nextOpacity +")";
                        if(nextOpacity == target) {
                            clearInterval(obj.alpha);
                            if(endFn) {
                                endFn();
                            }
                        }
                    },frequency )
                }
                
                //开始写正式的功能
                window.onload = function () {
                    var oUl = document.getElementById("showPic");
                    var aBox = oUl.getElementsByTagName("div");
                    var oTbody = document.getElementsByTagName("tbody")[0];
                    var oAll = document.getElementById("total").getElementsByTagName("span")[0];
                    
                    //写一个函数传参的倒计时函数remainingTime,以box作为参数
                    function remainingTime(box) {
                        var oBtn = box.getElementsByTagName("input")[1];    //即：按钮“确定”
                        oBtn.onclick = function () {
                            var setTime = new Date(box.getElementsByTagName("input")[0].value);    //以input里面的时间作为设定时间
                            var oP = box.getElementsByTagName("p")[0];      //显示倒计时的段落
                            var oP2 = box.getElementsByTagName("p")[1];     //显示商品名称的段落
                            var price = box.getElementsByTagName("span")[2].innerHTML;    //商品的价格
                            var oImg = box.getElementsByTagName("img")[0];      //商品的图片
                            
                            clearInterval(box.timer);
                            box.timer = setInterval( function () {
                                var nowTime = new Date();    //当前的时间
                                var t = Math.floor(( setTime - nowTime )/1000);    //向下取整得到时间间距的“秒”值
                                if(t >= 0) {
                                    oP.innerHTML = "剩余" + Math.floor(t/86400) + "天" + Math.floor(t%86400/3600) + "时" + Math.floor(t%86400%3600/60) + "分" + t%60 + "秒";
                                    
                                }else {
                                    clearInterval(box.timer);
                                    shake( box,"left",function () {
                                        doMove( box , "top" ,10 ,346 );
                                        opacity( box , 10 , 0 ,30 , function () {
                                            box.style.display = "none";
                                            oTbody.innerHTML += " <tr><td> "+ oP2.innerHTML +" </td><td> "+ price +" </td><td><img src=' "+ oImg.src +" '/></td></tr> ";
                                            oAll.innerHTML = parseFloat(oAll.innerHTML) + parseFloat(price);
                                        } )
                                    } )
                                }
                            },1000 )
                        }
                    }
                    
                    //搞个for循环来让每个div实现功能
                    for(var i=0; i<aBox.length; i++) {
                        remainingTime( aBox[i] );
                    }
                    
                }
                
            
        </script>
    </head>
    <body>
        <div id="wrap">
            <h1>限时秒杀</h1>
            <ul id="showPic" class="clear">
                <li>
                    <div class="box">
                        <input type="text" value="July 12,2017 14:30:30"/>
                        <input type="button" value="确定"/>
                        <p class="remaining_time">剩余00天0时0分0秒</p>
                        <img src="img/ad1.png"/>
                        <p class="tit">疯狂599 美的爆款隐藏式面板下拉门微波炉</p>
                        <p class="show_price"><span>抢购价</span><span class="price">￥</span><span class="price">666.00</span></p>
                    </div>    
                </li>
                <li>
                    <div class="box">
                        <input type="text" value="July 12,2017 14:30:30"/>
                        <input type="button" value="确定"/>
                        <p class="remaining_time">剩余00天0时0分0秒</p>
                        <img src="img/ad2.png"/>
                        <p class="tit">疯狂599 美的爆款隐藏式面板下拉门微波炉</p>
                       <p class="show_price"><span>抢购价</span><span class="price">￥</span><span class="price">666.00</span></p>
                    </div>    
                </li>
               <li>
                    <div class="box">
                        <input type="text" value="July 12,2017 14:30:30"/>
                        <input type="button" value="确定"/>
                        <p class="remaining_time">剩余00天0时0分0秒</p>
                        <img src="img/ad3.png"/>
                        <p class="tit">疯狂599 美的爆款隐藏式面板下拉门微波炉</p>
                        <p class="show_price"><span>抢购价</span><span class="price">￥</span><span class="price">666.00</span></p>
                    </div>    
                </li>
                <li>
                    <div class="box">
                        <input type="text" value="July 12,2017 14:30:30"/>
                        <input type="button" value="确定"/>
                        <p class="remaining_time">剩余00天0时0分0秒</p>
                        <img src="img/ad4.png"/>
                        <p class="tit">疯狂599 美的爆款隐藏式面板下拉门微波炉</p>
                        <p class="show_price"><span>抢购价</span><span class="price">￥</span><span class="price">666.00</span></p>
                    </div>    
                </li>
            </ul>
            <table>
                <thead>
                    <tr>
                        <td>商品名称</td>
                        <td>价格</td>
                        <td></td>
                    </tr>
                </thead>
                <tbody>
                    <!--
                    <tr>
                        <td>
                            <p>疯狂599，美的爆款隐藏式面板下拉门微波炉</p>
                        </td>
                        <td>599.00</td>
                        <td>
                            <img src="img/ad1.png"/>
                        </td>
                    </tr>
                    -->
                </tbody>
            </table>
            <p id="total">
                总价：<span class="all">0</span>元
            </p>
        </div>    
    </body>
</html>